<template>
  <div class="food-list" v-if="index === 0">
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="88vw"
      :items="items"
      @click-nav="navClick"
    >
      <template #content>
        <div v-for="(item, index) in subItem" :key="index" class="item-bg">
          <list-item
            :handleAdd="handleAdd"
            :handleChange="handleChange"
            :item="item"
          ></list-item>
        </div>
      </template>
    </van-tree-select>
  </div>
  <div v-else>
    {{ foodData.content }}
  </div>
</template>
<script>
// import FoodListItem from "./FoodListItem.vue";
import ListItem from "@/components/ListItem.vue";
import { reactive, toRefs } from "vue";
export default {
  props: ["index", "foodData"],
  components: { ListItem },
  setup(props) {
    let data = reactive({
      activeIndex: 0,
      items: [],
      subItem: [],
    });
    const initData = () => {
      let newArray = [];
      props.foodData?.items?.forEach((item, index) => {
        newArray.push({
          text: item.text,
        });
        if (data.activeIndex === index) {
          data.subItem = item.children;
        }
      });
      data.items = newArray;
    };
    initData();
    const navClick = (i) => {
      // console.log(i);
      data.activeIndex = i;
      initData();
    };
    const handleAdd = (id) => {
      data.subItem.forEach((item, index) => {
        if (item.id === id) {
          item.add = false;
          item.num += 1;
        }
      });
    };

    const handleChange = (value, detail) => {
      data.subItem.forEach((item) => {
        if (item.id === detail.name) {
          item.num = value;
        }
      });
    };
    return {
      ...toRefs(data),
      navClick,
      handleAdd,
      handleChange,
    };
  },
};
</script>
<style lang="scss" scoped>
.food-list {
  margin-top: 20px;
  .item-bg {
    padding: 10px;
  }
}
::v-deep .van-tree-select__item--active {
  color: #ffc300;
}
::v-deep .van-sidebar-item--select::before {
  background-color: #ffc300;
}
</style>
